<template>
	<view class="h-full flex flex-col px-30 pb-30">
		<NavBarVue :title="stepList[step]" :leftIcon="false" rightIcon="closeempty" @clickRight="back"></NavBarVue>
		<view class="flex">
			<uni-icons type="left" size="20" @click="onBack" v-if="step!=0"></uni-icons>
		</view>
		<template v-if="step==0">
			<view class="flex-1 overflow-hidden">
				<scroll-view scroll-y="true" class="h-full">
					<view class="h-full">
						<view class="flex justify-between p-30 border-b-4 border-b-blue-500" v-for="e,i in typeList" :key="i"
							@click="setbBsplateId(e)">
							<view class="">
								<text>{{e.name}}</text>
							</view>
							<view class="">
								<ImageBoxVue v-if="bbsplateId === e.id" src="/static/icons/selected.png" width="36rpx" height="36rpx">
								</ImageBoxVue>
								<ImageBoxVue v-else src="/static/icons/no_selected.png" width="36rpx" height="36rpx">
								</ImageBoxVue>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="pt-30" v-if="step == 0">
				<button type="primary" class="rounded-full" @click="onSave">确定</button>
			</view>
		</template>
		<template v-else>
			<mind v-if="bbsplate.btp == 1" @update="handleUpdateSend" @send="handleSend"></mind>
			<astrolabe v-if="bbsplate.btp == 2" @update="handleUpdateSend" @send="handleSend"></astrolabe>
			<card v-if="bbsplate.btp == 3" @update="handleUpdateSend" @send="handleSend"></card>
		</template>

		<view class="position-absolute">
			<uni-data-picker ref="pickerRef" :localdata="items" popup-title="请选择牌阵" :map="{text:'name',value:'id'}"
				@change="onchange"></uni-data-picker>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		provide
	} from 'vue';
	import {
		onShow,
		onReady
	} from "@dcloudio/uni-app"
	import testApi from '@/apis/apiList/testApi';
	import communityApi from '@/apis/apiList/communityApi';
	import indexApi from '@/apis/apiList/indexApi.js';
	import mind from './mind.vue' // 心理区
	import astrolabe from './astrolabe.vue' // 星盘区
	import card from './card.vue' // 卡牌区
	import {
		minCost
	} from '@/config/publicFun';

	// const {
	// 	typeList
	// } = defineProps(['typeList'])
	const typeList = ref([])
	const getWorkBbsplatelist = () => {
		communityApi.getWorkBbsplatelist().then(res => {
			// tabId.value = res.data[0].id
			typeList.value = res.data
			nextTick(() => {
				addPostPopupRef.value.open()
			})
		})
	}
	const emit = defineEmits(['onSend'])
	const step = ref(0)
	const posts = ref(0) // 板块判断
	const bbsplateId = ref("") // 板块Id
	const bbsplate = ref({}) // 板块信息
	const postFrom = ref({
		paysts: 0, //支付方式
		sinpay: "", //支付金额
		prv: 0, //私有
		pret: 0, //解读人数
		sec: 0, //保密
		exp: 0, //游客讲解 
		obs: 0, //评论
		sdes: 0, // 是否有牌阵信息，0否 1是
		describe: "", //描述
		ppst: 0, // 帖子类型 0 普通贴 1定向贴 2 快速贴
	})
	const stepList = ["选择模块", "内容", "设置", "支付"]
	const pretList = [{
		text: "1位",
		value: 1
	}, {
		text: "3位",
		value: 3
	}, {
		text: "5位",
		value: 5
	}, ]
	const systemSetting = ref([]) // 系统设置列表
	const items = ref([])
	const pickerRef = ref(null)
	const deckId = ref("")

	provide('deckId', deckId)
	provide('pickerRef', pickerRef)
	provide('step', step)
	provide('posts', posts)
	provide('bbsplateId', bbsplateId)
	provide('postFrom', postFrom)
	provide('pretList', pretList)
	provide('systemSetting', systemSetting)

	const onchange = (e) => {
		const value = e.detail.value
		// console.log(e.detail.value)
		deckId.value = value[2].value
		postFrom.value['deck.id'] = deckId.value
		// console.log(postFrom.value)
		uni.$on('chooseTarot', (obj) => {
			// console.log(obj)
		})
		uni.navigateTo({
			url: `/pages/test/tarot?id=${deckId.value}&dsts=1&ask=${postFrom.value.describe}&emit=chooseTarot`
		})
	}

	const getTypeList = () => {
		testApi.getCardtpyelistAndson().then(res => {
			res.data.map(item => {
				item.level = 1
			})
			formatData(res.data)
			items.value = res.data
		})
	}
	const formatData = (data) => {
		data.map(item => {
			item.children = item.sonlist || item.dlist
			if (item.sonlist) {
				formatData(item.sonlist)
			}
			if (item.dlist) {
				formatData(item.dlist)
			}
		})
	}
	systemSetting.value = uni.getStorageSync('dict');
	getTypeList();

	const handleSend = () => {
		// console.log('onSend')
		console.log(postFrom.value)
		// emit('onSend')
		uni.$emit('answer', postFrom.value)
		uni.navigateBack({
			delta: 1
		})
	}

	const handleUpdateSend = (obj) => {
		postFrom.value = Object.assign({}, postFrom.value, obj)
		// console.log(postFrom.value)
		if (step.value < stepList.length - 1)
			step.value++
	}

	const onSave = () => {
		if (bbsplateId.value == '') {
			uni.showToast({
				icon: 'none',
				title: '请选择模块'
			})
			return
		}
		if (step.value < stepList.length - 1)
			step.value++
	}
	const back = () => {
		console.log('退出');
		uni.navigateBack({
			delta: 1
		})
	}
	const onBack = () => {
		if (step.value !== 0) {
			step.value--
		}
	}
	const cost = ref({
		red: 0,
		blue: 0
	})
	const setbBsplateId = (val) => {
		bbsplateId.value = val.id
		bbsplate.value = val
		if (val.btp == 1) {
			// 心理专区
			posts.value = 1
		}
		if (val.btp == 2) {
			// 星图区
			posts.value = 2
		}
		if (val.btp == 3) {
			// 卡牌区
			posts.value = 3
		}
	}
	getWorkBbsplatelist()
</script>

<style lang="scss" scoped>
	.position-absolute {
		position: absolute;
		top: -2000rpx;
		z-index: 0;
	}
</style>